<template>
    <section class="tools-alone">
        <div class="alone-title">
            <figure>
                <img :src="toolsData.tmb" :title="toolsData.title">
            </figure>
            <h2>{{ toolsData.title }}</h2>
            <div class="alone-intro">
                <p class="top">简介</p>
                <p>类别：<span>{{ toolsData.category }}</span></p>
                <p>官网：<span><a target="_black" :href="toolsData.link">{{ toolsData.link }}</a></span></p>
                <p>兼容性：<span>{{ toolsData.browser }}</span></p>
                <p>较适用于：<span>{{ toolsData.apply }}</span></p>
                <p>已知坑点：<span>{{ toolsData.bug }}</span></p>
                <p>推荐人：<span>{{ toolsData.name }}</span></p>
            </div>
            <span class="br"></span>
            <div class="alone-title-api">
                <p>常用API</p>
                <ul>
                    {{ toolsData.intro }}
                </ul>
            </div>
        </div>
        <span class="br"></span>
        <div class="alone-comment">
            <p>点评</p>
            <ul>
                <li v-for="item in commentData">
                    <div>
                        <figure>
                            <img :src="item.man_id" :title="item.name">
                        </figure>
                        <span class="shux"></span>
                        <p>{{ item.content }}</p>
                    </div>
                    <span class="time">{{ item.time }}</span>
                </li>
            </ul>
        </div>
        <span class="br"></span>
        <div class="alone-published">
            <p>发表点评</p>
            <textarea id="published" cols="30" rows="10" placeholder="你想吐槽或赞美些什么？" ></textarea>
            <!-- <VmEditor @upload="showHtml"></VmEditor> -->
            <div>
                <input type="button" value="发表" id="postp">
                <input type="button" value="清空" id="clear">
            </div>
        </div>
	</section>
</template>
<script>
// import VmEditor from 'vm-editor';

export default {
  data () {
    return {
      toolsData: {},
      commentData: {},
      manData: {}
    };
  },
  created: function () {
    this.getHttp();
    this.getComment();
  },
  methods: {
    showHtml: function (data) {
      console.log(data);
    },
    getHttp: function () {
      this.$http({
        method: 'get',
        url: '/api/sell/admin.php/myApi/getTools',
        params: {
          id: this.$route.params.id
        }
      }).then((response) => {
        this.toolsData = response.data[0];
        console.log(this.toolsData);
      }, (error) => {
        console.log(error);
      });
    },
    getComment: function () {
      this.$http({
        method: 'get',
        url: '/api/sell/admin.php/myApi/getComment',
        params: {
          id: this.$route.params.idportrait
        }
      }).then((response) => {
        this.commentData = response.data;
        console.log(this.commentData);
      }, (error) => {
        console.log(error);
      });
    }
  }
};
</script>
<style lang="scss">
@import '../../common/scss/fun.scss';
.tools-alone{
    width: 100%;

    .br{
        display: block;
        width: 90%;
        height: 1px;
        background: rgba(0,0,0,0.2);
        margin: 4rem auto;
    }
    .alone-title{
        width: 100%;

        > figure{
            width: 80px;
            height: 80px;
            margin: 10px auto;

            img{
                width: 100%;
                height: 100%;
            }
        }
        h2{
            font-size: 1.75em;
            line-height: 1.25em;
            font-weight: 500;
            width: 100%;
            text-align: center;
            padding: 20px 0;
        }

        .alone-intro{
            .top{
                display: inline-block;
                font-size: 1.25em;
                line-height: 1.25em;

                &:after{
                    content: "";
                    display: inline-block;
                    width: 100%;
                    height: 1px;
                    background: #999;
                }
            }
            p{
                line-height: 1.5em;
                margin: 15px 0;
                font-size: 1em;
                
                a{
                    color: #000;
                }
            }
        }
        
        .alone-title-api{
            width: 100%;

            > p{
                font-size: 1.25em;
                display: inline-block;
                margin: 1em 0;
                
                &:after{
                    content: "";
                    display: inline-block;
                    width: 100%;
                    height: 1px;
                    background: #999;
                }
            }
            ul{
                list-style-type: none;
                padding: 0;
                margin: 1em 0;

                li{
                    line-height: 1.5em;
                }
            }
        }
    }

    .alone-comment{
        > p{
            font-size: 1.25em;
            display: inline-block;
            margin: 1em 0;

            &:after{
                content: "";
                display: inline-block;
                width: 100%;
                height: 1px;
                background: #999;
            }
        }

        ul{
            width: 100%;
            list-style-type: none;
            padding: 0;
            margin: 1em 0;

            li{
                width: 100%;
                &:last-child{
                    &:after{
                        content: '';
                        display: block;
                        width: 70%;
                        height: 0;
                    }
                }
                &:after{
                    content: '';
                    display: block;
                    width: 70%;
                    height: 1px;
                    background: #eee;
                    margin: 30px auto;
                }

                .time{
                    display: block;
                    width: 100%;
                    padding-right: 10px;
                    text-align: right;
                    font-size: 0.7em;
                }
                div{
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    figure{
                        display: block;
                        width: 10%;
                        height: 100%;
                        margin: 0;

                        img{
                            width: 50px;
                            height: 50px;
                            border-radius: 50%;
                            overflow: hidden;
                        }
                    }
                    .shux{
                        width: 1px;
                        height: 100%;
                        background: #333;
                    }
                    p{
                        width: 90%;
                        height: 100%;
                        font-size: 0.9em;
                        line-height: 1.5em;
                        font-size: #333;
                    }
                }       
            }
        }
    }

    .alone-published{
        width: 100%;
        > p{
            font-size: 1.25em;
            display: inline-block;

            &:after{
                content: "";
                display: inline-block;
                width: 100%;
                height: 1px;
                background: #eee;
            }
        }        
        textarea,input{
            outline:none;
        }
        #published{
            display: block;
            width: 100%;
            height: 150px;
            padding: 10px;
            border: 1px solid #eee;
            border-radius: 5px;
            resize: none;
        }
        div{
            margin: 20px 0; 
            float: right;

            input{
                padding: 8px 26px;
                color: #fff;
                border-radius: 4px;
                cursor: pointer;
                @extend %ani;
            }
            #postp{
                background: #5cb85c;
                border: 1px solid #4cae4c;
                margin-right: 10px;
                
                &:hover{
                    background: #449d44;
                    border: 1px solid #398439;
                }
            }
            #clear{
                border: 1px solid #eea236;
                background-color: #ec971f;

                &:hover{
                    background-color: #d58512;
                    border: 1px solid #d58512;
                }
            }
        }
        
    }
}
</style>
